﻿@model MessageModel
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title" id="myModalLabel">发送消息</h4>
            </div>
            <div class="modal-body" id="modalcontent">

                @using (Html.Bootstrap().BeginForm(c => c.Horizontal()))
                {
                    @Html.ValidationSummary()
                    <div class="form-group">
                        @Html.LabelFor(m => m.RecipientName, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-10">
                            @*@Html.Bootstrap().DropdownListFor(m => m.RecipientName).Multiple()*@
                            <select id="RecipientName" class="js-example-data-ajax form-control" multiple="multiple"></select>
                        </div>
                    </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.Content, new { @class = "col-sm-2 control-label" })
                            <div class="col-sm-10">
                                @Html.Bootstrap().TextareaFor(m => m.Content)
                            </div>
                        </div>
                }

            </div>
            <div class="modal-footer">
                <div class="pull-right">
                    <button class="btn btn-default" type="button" onclick="window.app.saveForm(event,'@Url.Action("Draft") ');"><i class="fa fa-pencil"></i> 草稿</button>
                    @Html.Bootstrap().Button("发送").Style(BootstrapStyle.Primary).Click("window.app.saveForm(event,'" + @Url.Action("Send") + "');")
                </div>
                <div class="pull-left">
                    @Html.Bootstrap().Button("关闭").Style(BootstrapStyle.Default).Attribute("data-dismiss", "modal")
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .select2-container--default{
        width:100%;
    }
    .select2-result-repository {
        padding-bottom: 3px;
        padding-top: 4px;
    }

    .select2-result-repository__title {
        color: black;
        font-weight: bold;
        line-height: 1.1;
        margin-bottom: 4px;
        overflow-wrap: break-word;
    }
</style>
<script>
    $(function () {
        $("#RecipientName").select2({
            ajax: {
                url: "@Url.Action("AutocompletePaged")",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        keyword: params.term,
                        pageNo: params.page
                    };
                },
                processResults: function (data, params) {

                    params.page = params.page || 1;

                    return {
                        results: data.data,
                        pagination: {
                            more: (params.page * 15) < data.recordsTotal
                        }
                    };
                },
                cache: true
            },
            language: "zh-CN",
            escapeMarkup: function (markup) { return markup; },
            minimumInputLength: 1,
            templateResult: formatRepo,
            templateSelection: formatRepoSelection
        });
        $(".select2-container--default").removeAttr("style");

        function formatRepo(repo) {

            if (repo.loading) return repo.text;

            var markup = "<div class='select2-result-repository clearfix'>" +

                "<div class='select2-result-repository__title'>" + repo.userName + "</div></div>";

            return markup;
        }

        function formatRepoSelection(repo) {
            return repo.userName;
        }
    });
</script>
